// 外容器
.container {
    display: flex;
    flex-direction: column;
    .head-img {
        //顶部图片
        width: 100%;
        height: 320rpx;
    }
    .head-img-hover {
        //顶部图片的遮罩
        width: 100%;
        height: 320rpx;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        .main-title {
            //电影名字
            font-size: 19px;
            color: #fff;
            font-weight: bold;
            margin-top: 50rpx;
            margin-left: 40rpx;
            letter-spacing: 2px;
        }
        .sub-title {
            //副标题
            font-size: 28rpx;
            color: #fff;
            margin-left: 40rpx;
            margin-top: 30rpx;
        }
        .like {
            //用户喜欢人数和评论人数
            display: flex;
            flex-direction: row;
            margin-top: 30rpx;
            margin-left: 40rpx;
            .highlight-font {
                color: #f21146;
                font-size: 22rpx;
                margin-right: 10rpx;
            }
            .plain-font {
                color: #666;
                font-size: 22rpx;
                margin-right: 30rpx;
            }
        }
    }
    .movie-img {
        //电影图片小图
        height: 238rpx;
        width: 175rpx;
        position: absolute;
        top: 160rpx;
        right: 30rpx;
    }
    .summary {
        //电影简介
        margin-left: 40rpx;
        margin-top: 40rpx;
        color: #777777;
        .original-title {
            color: #1f3463;
            font-size: 24rpx;
            font-weight: bold;
            margin-bottom: 40rpx;
        }
        .flex-row {
            display: flex;
            flex-direction: row;
            margin-bottom: 10rpx;
        }
        .mark {
            margin-right: 30rpx;
            white-space: nowrap;
            color: #999999;
        }
    }
    .hr {
        margin-top: 45rpx;
        height: 1px;
        width: 100%;
        background-color: #d9d9d9;
    }
    .synopsis {
        //电影剧情
        margin-left: 40rpx;
        display: flex;
        flex-direction: column;
        margin-top: 50rpx;
        .synopsis-font {
            color: #999;
        }
        .summary-content {
            margin-top: 20rpx;
            margin-right: 40rpx;
            line-height: 40rpx;
            letter-spacing: 1px;
        }
    }

    .cast {
        margin-left: 40rpx;
        display: flex;
        flex-direction: column;
        margin-top: 50rpx;
        .cast-font {
            color:#999;
            margin-bottom: 40rpx;
        }
        .cast-imgs {
            white-space: nowrap;
        }
        .cast-container {
            display:inline-flex;
            flex-direction: column;
            margin-bottom: 50rpx;
            margin-right: 40rpx;
            width: 170rpx;
            text-align: center;
            white-space: normal;
            .cast-img {
                width:170rpx;
                height: 210rpx;
            }
            .cast-name {
                margin: 10rpx auto 0;
            }
        }
    }
}